<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
		<view class="custom_box">
			<image class="indexbg"
				src="https://images.fudiemall.com/storage/default/20250411/BG77ff634c5c493fbb0cb752c7b44d86c703900c11.png"
				mode="aspectFill"></image>
			<view :style="{height: statusBarHeight + 'px', backgroundColor: backgroundColor }"></view>
			<view class="custom_nav " :style="{height: titleHeight + 'px', backgroundColor: backgroundColor}">

				<image class="goback"
					src="https://images.fudiemall.com/storage/default/20250411/left1a09bc837d836f79ae700b66670bc2b280f7c972.png"
					mode="aspectFill"  @click="leftClick"></image>
				<text class="f28 c3">消息</text>
			</view>
		</view>
		<view :style="{height: statusBarHeight + titleHeight + 'px'}" style="width: 100%;"></view>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<view class="">
			<u-navbar title="消息" :fixed="true" :placeholder="true" :safeAreaInsetTop="true" :autoBack="false"
				leftIconColor="#333" titleStyle="color:#333" @leftClick="leftClick" bgColor="transparent"></u-navbar>
			<image class="indexbg"
				src="https://images.fudiemall.com/storage/default/20250411/BG77ff634c5c493fbb0cb752c7b44d86c703900c11.png"
				mode="aspectFill"></image>
		</view>
		<!-- #endif -->
		<view class="new_box mart flex_dq"  @click="golists(1)">
			<view class="notice">
				<image
					src="https://images.fudiemall.com/storage/default/20250411/news8b9455e9295cf6939b57951e50c96e9278c3ebcd.png"
					mode="aspectFill"></image>
				<!-- <text class="notice_txt"
					v-if="overallNews.is_all_read_number!=0">{{overallNews.is_all_read_number>99?'99+':overallNews.is_all_read_number}}</text> -->
			</view>
			<view class=" flex_Z">
				<text class="f36 zts marb">云猫公告</text>
				<text class="f28 c6">{{gonggao}}</text>
			</view>
		</view>
		<view class="new_box mart flex_dq"  @click="golists(2)">
			<view class="notice">
				<image
					src="https://images.fudiemall.com/storage/default/20250417/dimao0600c64d1b060ba8d1d0a5984af7f1257f744f87.png"
					mode="aspectFill"></image>
				<!-- <text class="notice_txt"
					v-if="overallNews.is_all_read_number!=0">{{overallNews.is_all_read_number>99?'99+':overallNews.is_all_read_number}}</text> -->
			</view>
			<view class=" flex_Z">
				<text class="f36 zts marb">地猫公告</text>
				<text class="f28 c6">{{gonggao}}</text>
			</view>
		</view>
		<view class="new_box flex_dq"  @click="gochats">
			<view class="notice">
				<image
					src="https://images.fudiemall.com/storage/default/20250411/chant054b4cd21441eb67e118d22cca22dd1e29aee45e.png"
					mode="aspectFill"></image>

			</view>
			<view class=" flex_Z">
				<text class="f36 c6 marb">我的群聊</text>
			</view>
		</view>
				<view class="new_box flex_dq" @click="gochat(item.conversationId)" v-for="item in group" :key="item.id">
			<view class="notice">
				<image :src="item.lastMessage.ext.groupheadimg" mode="aspectFill"></image>
				<text class="notice_txt"
					v-if="item.unReadCount!=0">{{item.unReadCount> 99 ?'99+':item.unReadCount}}</text>

			</view>
			<view class=" flex_Z">
				<text class="f36 zts marb">{{item.lastMessage.ext.groupname}}</text>
				<text class="f28 slh c4"
					v-if="item.lastMessage.type=='txt'">{{item.lastMessage.ext.nickname}}:{{item.lastMessage.msg}}</text>
				<text class="f28 c4" v-if="item.lastMessage.type=='img'">{{item.lastMessage.ext.nickname}}:[图片]</text>
				<text class="f28 c4" v-if="item.lastMessage.type=='video'">{{item.lastMessage.ext.nickname}}:[视频]</text>
				<text class="f28 c4" v-if="item.lastMessage.type=='audio'">{{item.lastMessage.ext.nickname}}:[语言]</text>
			</view>
			<image v-if="item.marks" src="https://images.fudiemall.com/storage/default/20250412/pingbi6c26d40a103633b1e106849fc59e517e19122c76.png"
				style="width: 40rpx;height: 42rpx;position: absolute;top: 50rpx;right: 40rpx;" mode="aspectFill"></image>
		</view>

		<!-- <view class="" data-url="/pagesMy/chat/chat" @click="allJump">
			去群聊
		</view> -->
		<!-- 				<view class="new_box flex_dq">
			<view class="notice">
				<image src="../../static/icon/system.png" mode="aspectFill"></image>
				<text class="notice_txt"  v-if="overallNews.message_is_read_number!=0">{{overallNews.message_is_read_number>99?'99+':overallNews.message_is_read_number}}</text>
			</view> 
			<view class=" flex_Z" data-url="/pagesMy/setting/notification" @click="allJump"> 
				<text class="f36 c0 marb">我的群聊</text>
				<text class="f28 c4">{{content}}</text>
			</view>
		</view>
		<view class="new_box flex_dq">
			<view class="notice">
				<image src="../../static/icon/system.png" mode="aspectFill"></image>
				<text class="notice_txt"  v-if="overallNews.message_is_read_number!=0">{{overallNews.message_is_read_number>99?'99+':overallNews.message_is_read_number}}</text>
			</view> 
			<view class=" flex_Z" data-url="/pagesMy/setting/notification" @click="allJump"> 
				<text class="f36 c0 marb">我的好友</text>
				<text class="f28 c4">{{content}}</text>
			</view>
		</view> -->
		<!-- <view class="light"></view> -->
	</view>
</template>

<script>
	import {
		myuser
	} from "../../api/user.js"
	import {
		memberGroupList
	} from "../../api/hx.js"
	import WebIM from "../../utils/WebIM.js"
	export default {
		data() {
			return {
				xiaoxi: '585',
				overallNews: [],
				content: "",
				gonggao: '',
				group: [],
				newArray: [],
				groupid: [],
				userinfo: {},
				nums: "",
				num1: "",
				statusBarHeight: 0, //状态栏高度
				titleHeight: 0, // 标题栏高度
				backgroundColor: '',
			}
		},
		// onLoad() {
		// 	this.getoverallNews()
		// },
		onShow() {
			this.getmsg()
				this.newArray = []
				// this.getoverallNews()

				this.getgrouplist()
				this.getlist()
			this.getuser()
		},
		onReady() {
			// #ifdef MP-WEIXIN 
			uni.getSystemInfo({
				success: res => {
					this.statusBarHeight = res.statusBarHeight
					console.log(this.statusBarHeight);
				}
			})
			const custombar = uni.getMenuButtonBoundingClientRect();
			this.titleHeight = (custombar.top - this.statusBarHeight) * 2 + custombar.height
			console.log(this.titleHeight);
			// #endif

		},
		methods: {
			golists(type){
				uni.navigateTo({
					url:"/pageDao/Dao/noticelist?type="+type
				})
			},
			leftClick() {
				//获取页面栈的长度
				const canNavBack = getCurrentPages()
				console.log(canNavBack.length);
				// 判断是否刷新了浏览器，刷新了浏览器，页面栈只有当前一个
				if (canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url: '/pages/index/cloudCatIndex'
					})
				}
			},
			gochats(){
				uni.navigateTo({
					url:"/pageDao/groupchat/grouplist"
				})
			},
			getlist() {
				memberGroupList({}).then(res => {
					if (res.code == 1) {
						this.list = res.data
					}
				})
			},
			login() {
				let that = this
				var options = {
					user: that.userinfo.id.toString(),
					accessToken: that.userinfo.hx_im_token,
					appKey: uni.WebIM.config.appkey
				};
				console.log(options, "登陆数据")
				uni.setStorageSync("hx_token", that.userinfo.hx_im_token)
				uni.WebIM.conn.open(options).then(res => {
						console.log(res, "查看")
					})
					.catch((reason) => {
						console.log("login fail", reason);
					});
				// console.log("登录成功")

				// console.log("登录成功")

			},
			gochat(id) {
				uni.navigateTo({
					url: "/pageDao/groupchat/groupchat?id=" + id
				})
			},
			getuser() {
				myuser().then(res => {
					console.log(res)
					if (res.code == 1) {
						this.userinfo = res.data
						this.login()
					}
				})
			},
			getmsg() {
				let that = this
				uni.WebIM.conn.addEventHandler("onMessage", {
					onMessage: function(ress) {
						console.log(ress)
						setTimeout(() => {
							that.getgrouplist()
						}, 1500)
						// console.log("qwdqwd", ress)
					}

				})
				uni.WebIM.conn.addEventHandler("onError", {
					onError: function(ress) {
						console.log("qdqdqdqds", ress)
						if (ress.type == 28 || ress.type == 32 || ress.type == 39 || ress.type == 1 || ress
							.type == 700) {
							console.log("异常")
							that.getuser()
						}
						if (ress.type == 16) {
							that.getuser()
							uni.$u.tosat("网络异常")
						}
						console.log(ress, "失败")
						// that.getgrouplist()
						// console.log("qwdqwd", ress)
					}

				})
				// uni.WebIM.conn.addEventHandler("onTextMessage", {
				// 	onImageMessage: function(ress) {
				// 		setTimeout(()=>{
				// 			that.getgrouplist()
				// 		},1500)
				// 		// console.log("qwdqwd", ress)
				// 	}

				// })
				// uni.WebIM.conn.addEventHandler("onVideoMessage", {
				// 	onVideoMessage: function(ress) {
				// 		setTimeout(()=>{
				// 			that.getgrouplist()
				// 		},1500)
				// 		// console.log("qwdqwd", ress)
				// 	}

				// })

			},
			getgrouplist() {
				// uni.WebIM.conn.logOut().then(res=>{
				// 	console.log(res)
				// })

				uni.WebIM.conn.getServerConversations({
					pageSize: 50,
					cursor: ''
				}).then(res => {
					const data = {
						...res
					}
					console.log("%c>>>会话列表", "color:#6ad1c7", data)
					// console.log("会话列表", res)
					this.nums = 0;
					this.group = data.data.conversations
					for (let i = 0; i < this.group.length; i++) {
						if (this.group[i].marks) {
							this.nums = 0
							this.group[i].unReadCount = 0
							return this.group
						} else {
							this.nums += this.group[i].unReadCount
						}

						// this.addlist.push(this.group[i].conversationId)
						// 将name和avatar一起push到新数组中

					}
					if (this.nums + this.num1 > 0) {
						uni.setTabBarBadge({
							index: 3,
							text: (this.nums + this.num1 > 99 ? '99+' : this.nums + this.num1).toString()
						})
					} else {
						uni.hideTabBarRedDot({
							index: 3,
						})
					}

					console.log(this.nums)
					// console.log(this.group)
				})
			},
			allJump(e) {
				let {
					url
				} = e.currentTarget.dataset
				uni.navigateTo({
					url: url
				})
			},
			getoverallNews() {
				messagesindex().then(res => {
					console.log(res);
					if (res.code == 1) {
						if (Number(res.data.message_number) > 0) {
							uni.setTabBarBadge({
								index: 3,
								text: (res.data.message_number)
							})
						} else {
							uni.hideTabBarRedDot({
								index: 3,
							})
						}
						this.num1 = Number(res.data.message_number)
						this.overallNews = res.data
						if (res.data.new_notice) {
							this.gonggao = res.data.new_notice.title
						} else {
							this.gonggao = '暂无新公告'
						}
						if (res.data.new_message) {
							this.content = res.data.new_message.content
						} else {
							this.content = '暂无新通知'
						}
					}
				})
			}
		},
	}
</script>
<style>
	page {
		background: #F7F7F7;
	}
</style>
<style scoped lang="scss">
	.custom_box {
		width: 750rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 8;
		padding-bottom: 10rpx;
		opacity: 1;
	}

	.new_box {
		position: relative;
		width: 100%;
		margin-top: 20rpx;
		z-index: 99;
	}

	.indexbg {
		position: absolute;
		top: 0;
		left: 0;
		width: 750rpx;
		height: 460rpx;

	}

	.custom_nav {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 750rpx;
		font-size: 36rpx;
		z-index: 9;
		color: #FFFFFF;
	}

	.goback {
		position: absolute;
		left: 30rpx;
		// text-align: center;
		width: 14rpx;
		height: 30rpx;
		// color: #000;
		
	}

	.notice {
		position: relative;
	}

	.notice>image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin: 0 22rpx;
	}

	.notice_txt {
		position: absolute;
		top: 4rpx;
		right: 16rpx;
		font-size: 24rpx;
		color: #ffffff;
		background: red;
		padding: 6rpx 16rpx;
		border-radius: 40rpx;
	}

	.zts {
		color: #A68A64;
	}

	.mart {
		margin-top: 20rpx;
	}

	.marb {
		margin-bottom: 6rpx;
	}

	.light {
		width: 300rpx;
		height: 300rpx;
		border-radius: 50%;
		background: #ffffff60;
		box-shadow: 0px 0px 30px 30px rgba(255, 255, 255, 1);
		margin: 120rpx auto;
	}

	.slh {
		width: 500rpx;
		white-space: nowrap;
		/* 不换行 */
		overflow: hidden;
		/* 超出部分隐藏 */
		text-overflow: ellipsis;
	}
</style>